let that;
class DynamicTable {
  constructor(className, thead, tbody, theadData, tbodyData) {
    that = this;
    this.table = document.querySelector(className);
    this.thead = document.querySelector(thead);
    this.tbody = document.querySelector(tbody);
    this.theadData = theadData;
    this.tbodyData = tbodyData;
    this.init();
  }
  init() {
    // 创建之前先清空
    this.tbody.innerHTML = "";
    this.thead.innerHTML = "";

    this.creatElement(this.thead, this.tbody, this.theadData, this.tbodyData);

    this.trs = document.querySelectorAll("#tbody tr");
  }
  creatElement(thead, tbody, theadData, tbodyData) {
    // 创建 最前面的checkbox
    const th = document.createElement("th");

    // thead
    for (let i = 0; i < theadData.length; i++) {
      const element = document.createElement("th");
      element.innerHTML = theadData[i];
      thead.appendChild(element);
    }

    // tbody
    for (let i = 0; i < tbodyData.length; i++) {
      const tr = document.createElement("tr");
      // 创建 最前面的checkbox

      tbody.appendChild(tr);

      for (let item in tbodyData[i]) {
        const td = document.createElement("td");
        td.setAttribute("data-item", tbodyData[i][item]);
        td.innerHTML = tbodyData[i][item];
        tr.appendChild(td);
      }
      // 添加按钮
      const td = document.createElement("td");
      tr.appendChild(td);
      tbody.appendChild(tr);
    }
  }
}

export default DynamicTable;
